<tpl var layoutStyle={ />
<style>
	.layui-table .checkbox {
		width: 60px;
		text-align: center;
	}

	.layui-table .checkbox .layui-form-radio {
		margin-top: 0px;
		margin-right: 0px;
		padding-right: 0px;
	}

	.layui-table .checkbox .layui-form-checkbox {
		margin-top: 0px;
	}
</style>
<tpl }; />
<tpl var layoutBody={ />
<div data-identity="sys:user" data-table="sys_user">
	<div class="layui-breadcrumb">
		<a href="/manage/index.jspx">首页</a>
		<a href="/manage/sys/user/index.jspx">用户管理</a>
		<a href="javascript:;">
			<cite>添加</cite>
		</a>
	</div>
	<hr>
	<fieldset class="layui-elem-field">
		<legend>添加 用户管理</legend>
		<div class="layui-field-box">
			<form class="layui-form" action="save.json?oper=create" lay-filter="mSysUserForm">
				<div class="layui-form-item" data-type="int" data-isnull="NO" data-name="role_id">
					<label class="layui-form-label">账号类型：</label>
					<div class="layui-input-block">
						<select name="type" class="layui-input">
							<option value="">请选择账号类型</option>
							<tpl for(item in types){ />
							<option value="${item.key}">${item.desc}</option>
							<tpl } />
						</select>
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="account">
					<label class="layui-form-label">用户帐号：</label>
					<div class="layui-input-block">
						<input type="text" name="account" placeholder="请输入用户帐号" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="password">
					<label class="layui-form-label">用户密码：</label>
					<div class="layui-input-block">
						<input type="password" name="password" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="name">
					<label class="layui-form-label">用户名称：</label>
					<div class="layui-input-block">
						<input type="text" name="name" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="phone">
					<label class="layui-form-label">联系方式：</label>
					<div class="layui-input-block">
						<input type="text" name="phone" placeholder="请输入用户联系方式" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="qq">
					<label class="layui-form-label">联系QQ：</label>
					<div class="layui-input-block">
						<input type="text" name="qq" placeholder="请输入联系QQ" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="email">
					<label class="layui-form-label">联系邮箱：</label>
					<div class="layui-input-block">
						<input type="text" name="email" placeholder="请输入联系邮箱" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="avatar">
					<label class="layui-form-label">头像：</label>
					<div class="layui-input-avatar edit" id="user-avatar">
						<img src='${defAvatar}' id="upload" class="layui-input-avatar-view">
						<input type="text" name="avatar" class="layui-input-avatar-value">
					</div>
				</div>
				<div class="layui-form-item" data-type="int" data-isnull="NO" data-name="role_id">
					<label class="layui-form-label">用户组：</label>
					<div class="layui-input-block">
						<table class="layui-table" lay-size="sm">
							<thead>
								<tr>
									<th class="checkbox">是否选中</th>
									<th class="checkbox">是否默认</th>
									<th>用户组标识</th>
									<th>用户组名称</th>
								</tr>
							</thead>
							<tbody id="group-select">
								<tpl for(item in groups){ />
								<tr data-identity="${item.identity}">
									<td class="checkbox"><input type="checkbox" lay-skin="primary" lay-filter="group"></td>
									<td class="checkbox"><input type="radio" name="group-default" disabled></td>
									<td>${item.identity}</td>
									<td>${item.name}</td>
								</tr>
								<tpl } />
							</tbody>
						</table>
					</div>
				</div>
				<div class="layui-form-item" data-type="int" data-isnull="NO" data-name="role_id">
					<label class="layui-form-label">用户角色：</label>
					<div class="layui-input-block">
						<table class="layui-table" lay-size="sm">
							<thead>
								<tr>
									<th class="checkbox">是否选中</th>
									<th class="checkbox">是否默认</th>
									<th>角色标识</th>
									<th>角色名称</th>
								</tr>
							</thead>
							<tbody id="role-select">
								<tpl for(item in roles){ />
								<tr data-identity="${item.identity}">
									<td class="checkbox"><input type="checkbox" lay-skin="primary" lay-filter="role"></td>
									<td class="checkbox"><input type="radio" name="role-default" disabled></td>
									<td>${item.identity}</td>
									<td>${item.name}</td>
								</tr>
								<tpl } />
							</tbody>
						</table>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<a class="layui-btn layui-btn-primary" href="javascript:history.go(-1)">返回</a>
						<button class="layui-btn" lay-submit lay-filter="mSysUserForm">立即提交</button>
					</div>
				</div>
			</form>
		</div>
	</fieldset>
</div>
<tpl }; />

<tpl var layoutScript={ />
<script type="text/javascript">
	layui.config({
		base: '${webCdn}/plugins/layui/modules/'
	}).extend({
		http: 'http/http.min',
		message: 'message/message.min',
	}).use(['element', 'message', 'http', 'upload', 'form'], function () {
		// 绑定用户角色被勾选切换默认是否可选事件
		layui.form.on('checkbox(role)', function (data) {
			var $parent = $(data.elem).parents('tr');
			var $radio = $parent.find('[type="radio"]');

			if (!data.elem || !data.elem.checked) {
				$radio.attr('disabled', true);
				$radio.prop('checked', false);
			} else {
				$radio.removeAttr('disabled');
				$radio.prop('checked', true);
			}

			layui.form.render('radio');
		});

		// 绑定用户组被勾选切换默认是否可选事件
		layui.form.on('checkbox(group)', function (data) {
			var $parent = $(data.elem).parents('tr');
			var $radio = $parent.find('[type="radio"]');

			if (!data.elem || !data.elem.checked) {
				$radio.attr('disabled', true);
				$radio.prop('checked', false);
			} else {
				$radio.removeAttr('disabled');
				$radio.prop('checked', true);
			}

			layui.form.render('radio');
		});

		// 绑定表单提交事件
		layui.form.on('submit(mSysUserForm)', function (data) {
			var param = Object.assign({}, data.field);
			param.roleList = getSelectValueList($('#role-select tr'));
			param.groupList = getSelectValueList($('#group-select tr'));

			layui.http.json('save.json?oper=create0', param, function (res) {
				layui.message.success(res.message, () => history.back());
			});

			return false;
		});

		function getSelectValueList($elem) {
			return $elem.map((i, e) => {
				var $checkbox = $(e).find('[type="checkbox"]');
				var $radio = $(e).find('[type="radio"]');

				var temp = {};

				if ($checkbox.is(':checked')) {
					temp['identity'] = $(e).data('identity');
					temp['isdefault'] = $radio.is(':checked');
				} else {
					return;
				}

				return temp;
			}).toArray();
		}

		// 头像上传组件
		layui.upload.render({
			elem: '#upload',
			url: '/upload/image/base.json',
			done: function (res) {
				if (!res || res.code !== 'SUCCESS') {
					return layui.message.failure(res.message);
				}

				$('#user-avatar input[name="avatar"]').val(res.data);
				$('#user-avatar img').attr('src', '/down/image/' + res.data);
			},
			error: function () {
				layui.message.failure('上传失败');
			}
		});
	});
</script>
<tpl }; />
<tpl include( "../../tpl/layout-scroll.html" ,{identity: "sys:user" ,layoutStyle:layoutStyle,layoutBody:layoutBody,layoutScript:layoutScript}){} />